---
import Layout from '../../../layouts/Layout.astro';
import ProductCard from '../../../components/ProductCard.astro';
import SkeletonCard from '../../../components/SkeletonCard.astro';
import Breadcrumb from '../../../components/Breadcrumb.astro';
import { getProductsFromDB, getProductCountBySize, getBrandsFromDB } from '../../../lib/products';

const { size } = Astro.params;

// Validate size (EU sizes 35-50)
const sizeNum = parseFloat(size!);
if (isNaN(sizeNum) || sizeNum < 35 || sizeNum > 50) return Astro.redirect('/sneakers');

const url = Astro.url;
const sort = (url.searchParams.get('sort') || 'popular') as 'popular' | 'newest' | 'price_asc' | 'price_desc' | 'discount';
const page = Math.max(1, parseInt(url.searchParams.get('pagina') || '1'));
const perPage = 36;

const products = await getProductsFromDB({
  limit: perPage,
  offset: (page - 1) * perPage,
  orderBy: sort,
  size: size!,
});

const totalCount = await getProductCountBySize(size!);
const totalPages = Math.ceil(totalCount / perPage);
const brands = await getBrandsFromDB();

// Get top brands for this size
const topBrands = brands.slice(0, 8);

const title = `Sneakers maat ${size} — ${totalCount}+ modellen vergelijken | SneakerPicks`;
const description = `Alle sneakers in maat ${size}. Vergelijk ${totalCount}+ modellen van Nike, Adidas, New Balance en meer. Vind de laagste prijs in jouw maat.`;
const breadcrumbs = [
  { name: 'Home', url: 'https://sneakerpicks.nl/' },
  { name: 'Sneakers', url: 'https://sneakerpicks.nl/sneakers' },
  { name: `Maat ${size}`, url: `https://sneakerpicks.nl/sneakers/maat/${size}` },
];

const allSizes = ['36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46'];
---

<Layout title={title} description={description} noindex={page > 1}>
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: breadcrumbs.map((b, i) => ({
      "@type": "ListItem", position: i + 1, name: b.name, item: b.url
    }))
  })} />

  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <Breadcrumb items={[
      { label: 'Home', href: '/' },
      { label: 'Sneakers', href: '/sneakers' },
      { label: `Maat ${size}` },
    ]} />

    <div class="mb-8">
      <h1 class="text-3xl font-black tracking-tight sm:text-4xl">
        Sneakers maat {size}
      </h1>
      <p class="mt-2 text-text-secondary">
        {totalCount} sneakers beschikbaar in maat {size}. Vergelijk prijzen bij alle Nederlandse webshops.
      </p>
    </div>

    <!-- Size navigation -->
    <div class="mb-8 flex flex-wrap gap-2">
      {allSizes.map(s => (
        <a
          href={`/sneakers/maat/${s}`}
          class:list={[
            'rounded-lg border px-3 py-1.5 text-sm font-semibold transition-all',
            s === size
              ? 'border-accent bg-accent/10 text-accent'
              : 'border-border/50 text-text-muted hover:border-accent/30 hover:text-text'
          ]}
        >
          {s}
        </a>
      ))}
    </div>

    <!-- Sort -->
    <div class="mb-6 flex items-center justify-between">
      <span class="text-sm text-text-muted">{totalCount} resultaten</span>
      <div class="flex gap-2 text-xs">
        {[
          ['popular', 'Populair'],
          ['price_asc', 'Prijs ↑'],
          ['price_desc', 'Prijs ↓'],
          ['discount', 'Korting'],
        ].map(([val, label]) => (
          <a
            href={`?sort=${val}`}
            class:list={[
              'rounded-lg border px-3 py-1.5 transition-all',
              sort === val
                ? 'border-accent bg-accent/10 text-accent'
                : 'border-border/50 text-text-muted hover:text-text'
            ]}
          >
            {label}
          </a>
        ))}
      </div>
    </div>

    <!-- Product grid -->
    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {products.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>

    {products.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg font-semibold text-text-muted">Geen sneakers gevonden in maat {size}</p>
        <p class="mt-2 text-sm text-text-muted">Probeer een andere maat of bekijk <a href="/sneakers" class="text-accent hover:underline">alle sneakers</a></p>
      </div>
    )}

    <!-- Pagination -->
    {totalPages > 1 && (
      <nav class="mt-12 flex justify-center gap-2">
        {page > 1 && (
          <a href={`?pagina=${page - 1}${sort !== 'popular' ? `&sort=${sort}` : ''}`}
             class="rounded-lg border border-border/50 px-3 py-2 text-sm text-text-muted hover:text-text">← Vorige</a>
        )}
        {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => i + 1).map(p => (
          <a
            href={`?pagina=${p}${sort !== 'popular' ? `&sort=${sort}` : ''}`}
            class:list={[
              'rounded-lg border px-3 py-2 text-sm',
              p === page ? 'border-accent bg-accent/10 text-accent font-bold' : 'border-border/50 text-text-muted hover:text-text'
            ]}
          >
            {p}
          </a>
        ))}
        {page < totalPages && (
          <a href={`?pagina=${page + 1}${sort !== 'popular' ? `&sort=${sort}` : ''}`}
             class="rounded-lg border border-border/50 px-3 py-2 text-sm text-text-muted hover:text-text">Volgende →</a>
        )}
      </nav>
    )}

    <!-- SEO content -->
    <div class="mt-16 border-t border-border/50 pt-8">
      <h2 class="mb-4 text-xl font-bold">Sneakers maat {size} kopen</h2>
      <p class="text-sm text-text-secondary leading-relaxed">
        Op SneakerPicks vind je {totalCount}+ sneakers in maat {size}. We vergelijken dagelijks de prijzen bij alle grote Nederlandse webshops, zodat jij altijd de laagste prijs betaalt. Filter op merk, prijs of geslacht om de perfecte sneaker in jouw maat te vinden. Stel een prijsalert in en we laten je weten wanneer je favoriete sneaker in prijs daalt.
      </p>
      <div class="mt-4 flex flex-wrap gap-2">
        {topBrands.map(b => (
          <a href={`/sneakers?maat=${size}&merk=${b.slug}`}
             class="text-xs text-accent hover:underline">{b.name} maat {size}</a>
        ))}
      </div>
    </div>
  </section>
</Layout>